<template>
	<div :id="id" class="tab">
    <div class="export">
      <!-- <el-button class="primary_btn fr report_excel_btn"
        v-if="$store.getters.exportFromEnd"
        v-on:click="exportExcel"
      >{{$t('report.exportDetailXls')+($store.state.xlsxExportMode==='Both'?'(旧)':'')}}</el-button> -->

      <el-button class="primary_btn fr report_excel_btn"
        v-on:click="exportXlsx"
      >{{$t('report.exportDetailXls')}}</el-button>
      <el-button class="primary_btn fr pdf" v-on:click="exportPdf">{{$t('report.exportPDF')}}</el-button>
    </div>
    <breadCrumb @back="cancel" :titleArr="titleArr"></breadCrumb>
    <div class="deploy">
      <el-collapse accordion>
        <el-collapse-item>
          <template slot="title">
            <span class="fl explain">{{$t('report.toggleInstructe')}}</span>
          </template>
          <div>
            {{$t('report.callOutConnectAllNum')}}<br>
            {{$t('report.callPartakeRate')}}<br>
            {{$t('report.callPartakeEvalateNum')}}<br>
            {{$t('report.callInConnectAllNum')}}<br>
            {{$t('report.callCRs')}}<br>
            {{$t('report.callInTurnNum')}}<br>
            7.{{$t('report.RollOutAnswerCount')}}
            <p class="custom_alg">{{$t('report.ziDingYi')}}：</p>
            <p v-for="(item, index) in formulas" :key="item.name">
              {{index + 8}}.{{item.formulaInstr}}
            </p>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <crs-detail-table :data="data" :sum="sum" :config="[...configed, ...customHeader]" class="detail_table"></crs-detail-table>
  </div>
</template>
<script>
  import breadCrumb from '../../../ui-modules/breadCrumb/monitorBreadCrumb.vue'
  import crsDetailTable from '../base/crsDetailTable.vue'
  import {deepClone} from '@/utils/m7Utils.js'
  export default {
    name: 'surveyDetail',
    data () {
      return {
        id: 'name',
        titleArr: [this.$t('report.callReportApproveSurvey1'), this.$t('report.callReportApproveSurveyDetail')]
      }
    },
    components: {
      breadCrumb,
      crsDetailTable
    },
    methods: {
      // 后端导出抛事件
      exportExcel () {
        this.$emit('exportExcel', 'detail')
      },
      // 前端导出
      exportXlsx () {
        this.$emit('exportXlsx', 'Front')
      },
      // 传递导出PDF事件
      exportPdf () {
        this.$emit('exportPdf', 'detail')
      },
      // 传递返回上一级事件
      cancel () {
        this.$emit('close')
      }
    },
    beforeMount () {
    },
    props: {
      data: {
        type: Array,
        default: function () {
          return []
        }
      },
      sum: {
        type: Array,
        default: function () {
          return []
        }
      },
      config: {
        type: Array,
        default: function () {
          return []
        }
      },
      customHeader: {
        type: Array,
        default: function () {
          return []
        }
      },
      formulas: {
        type: Array,
        default: function () {
          return []
        }
      }
    },
    computed: {
      configed (cur) {
        if (!this.config || this.config.length === 0) {
          return []
        }
        let dealedArr = [...this.config]
        for (let i = 0; i < this.config.length; i++) {
          if (this.config[i].sub && this.config[i].sub.length) {
            this.config[i].order = this.config[i] + 1
            dealedArr.push(deepClone(this.config[i]))
            delete this.config[i].sub
          }
        }
        return dealedArr
      }
    }
  }
</script>
<style lang="stylus" scoped>
  .tab
    .primary_btn
      margin-left 10px
    .detail_table
      margin-top 10px
    .export
      height 30px
      margin-bottom 10px
    .deploy
      margin-top 10px
      .el-collapse
        border-bottom none
</style>
